<template>
	<view class="page_bg">
		<u-navbar title="创作会员" titleStyle="color:#fff;" :placeholder="true" leftIconColor="#fff" :autoBack="true"
			bgColor="rgba(0,0,0,1)">

		</u-navbar>

		<view class="cvip_info" v-show="settingData.vip_user_bg"
			:style="'background-image: url('+settingData.vip_user_bg+');'">
			<view class="info">
				<image class="ph" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="item">
					<view class="name">
						{{userInfo.first_name}}
						<image class="ico_v" :src="userInfo.tk_vip_logo" mode="widthFix"></image>
					</view>
					<view v-if="userInfo.is_tk_vip == 1" class="time">
						VIP {{userInfo.tk_vip_info.tk_expired_date}} 到期
					</view>
					<view v-else class="time">
						还未开通VIP
					</view>
				</view>
				<view v-if="userInfo.is_tk_vip == 0" class="btn">
					未开通
				</view>
				<view v-if="userInfo.is_tk_vip == 1" class="btn hover">
					已开通
				</view>
			</view>

			<view class="nav">
				<view class="item">
					<view class="num">
						{{userInfo.tk_vip_info.tk_person_count||0}}
					</view>
					<view class="name">
						形象
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{userInfo.tk_vip_info.tk_voice_count||0}}
					</view>
					<view class="name">
						声纹
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{userInfo.tk_token||0}}
					</view>
					<view class="name">
						氪气
					</view>
				</view>
			</view>
		</view>

		<view v-if="settingData.ios_wx_pay == 1" class="vip_price">
			<view class="item" v-for="(item,index) in vipInfo" :class="priceIndex == index?'hover':''"
				@click="clickVipPrice(index)" :key="index">
				<image class="ph" :src="item.image" mode="widthFix"></image>
				<!-- <view class="name">
					高级版
				</view>
				<view class="time">
					12个月
				</view>
				<view class="money">
					<text>￥</text>298
				</view>
				<view class="del_money">
					￥400/年
				</view> -->
			</view>
		</view>

		<!-- <view class="sale">
			<view class="name">
				1个月VIP会员，年度会员更优惠
			</view>
			<view class="mai">
				去购买
				<u-icon name="arrow-right" color="#7F7F83" size="22rpx"></u-icon>
			</view>
		</view> -->
		
		<view v-if="settingData.ios_wx_pay == 1" class="vip_desc">
			<image class="ph" :src="vipInfo[priceIndex].description" mode="widthFix"></image>
		</view>
		<view v-if="settingData.ios_wx_pay == 1" class="vip_desc">
			<image class="ph" v-if="userInfo.is_tk_vip == 0" :src="settingData.vip_desc" mode="widthFix"></image>
			<image class="ph" v-if="userInfo.is_tk_vip == 1" :src="settingData.vip_open_desc" mode="widthFix"></image>
		</view>
		
		<view v-if="settingData.ios_wx_pay == 1" class="">
			<view class="footer_none"></view>
			<view class="footer_yellow_btn">
				<view v-if="userInfo.is_tk_vip == 0" class="btn" @click="clickOpenVip">
					￥{{vipPrice}} 立即开通
				</view>
				<view v-if="userInfo.is_tk_vip == 1" class="btn" @click="clickOpenVip">
					￥{{vipPrice}} 立即续费
				</view>
				<checkbox-group class="agree" @change="changeCheckbox">
					<label>
						<checkbox value="agree" color="#FFCC33" style="transform:scale(0.6)" />我已阅读并同意
					</label>
					<navigator class="yellow" url="#" hover-class="none" @click="showPromise = true">《推氪会员服务协议》</navigator>
				</checkbox-group>
			</view>
		</view>
		
		<!-- 承诺 -->
		<u-popup :show="showPromise" :closeable="true" mode="center" bgColor="#484848" round="10rpx" :safeAreaInsetBottom="false" @close="closePromise" @open="openPromise">
			<view class="promise">
				<view class="title">
					{{instructions.title}}
				</view>
				<view class="text">
					{{instructions.content}}
				</view>
				<!-- <view class="btn" @click="clickAgree">
					我已知晓，同意
				</view> -->
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isVip: false,
				priceIndex: 0,
				userId: '',
				userInfo: {},
				settingData: {},
				description: '',
				vipInfo: [],
				agreeChecked: 0,
				openid: 'wx391cc6239c59b27c',
				vipPrice: 0,
				showPromise: false,
				instructions: {}
			}
		},
		onLoad() {
			const that = this
			this.userId = uni.getStorageSync('userId');
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			console.log(this.userInfo)
			this.getOpenid()
			
			this.getVipSettings()
			this.getReadTextExample()
			this.updateUserdata()
		},
		methods: {
			// 协议
			getReadTextExample(){
				uni.$u.http.get('/api/speed_txt_example/'+this.userId +'?from=miniprogram').then(res => {
					console.log('协议-----',res.data.data)
					this.instructions = res.data.data.terms_agreement
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取openid
			getOpenid(){
				const that = this
				wx.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							wx.request({
								url: 'https://www.shenmaio.com/api/wechat_action?from=miniprogram',
								data: {
									code: res.code,
									bid: 888
								},
								success (res) {
								    console.log(res.data.data)
									that.openid = res.data.data
								}
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					},
					fail(){
						console.log('登录失败--！')
					}
				})
			},
			// 生成支付订单
			clickOpenVip() {
				if (this.agreeChecked == 0) {
					uni.showToast({
						title: '请勾选同意服务协议',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				const currentTimestamp = Date.now();

				uni.$u.http.post('/api/wechat_order/' + this.userId + '?from=miniprogram', {
					paytype: this.vipInfo[this.priceIndex].paytype,
					pay_token: currentTimestamp,
					total_price_of_checking_out: this.vipInfo[this.priceIndex].total_price_of_checking_out,
					tk_type: this.vipInfo[this.priceIndex].tk_type,
					bid: 888
				}).then(res => {
					console.log('生成支付订单----', res.data)
					if (res.data.status == 1) {
						this.postPayData(res.data.data.out_trade_no, res.data.data.amount_to_pay,this.openid)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 线上支付
			postPayData(trade, amount, openid) {
				const that = this
				let params = {
					out_trade_no: trade,
					amount_to_pay: amount,
					openid: openid,
					bid: 888
				};
				console.log('--params--', params)
				uni.$u.http.post('/api/pay/' + this.userId + '?from=miniprogram', params).then(res => {
					console.log('线上支付--res--', res);
					console.log('线上支付----', res.data.data);
					if (res.data.status == 1) {
						const resData = res.data.data
						wx.requestPayment({
							timeStamp: resData.timeStamp,
							nonceStr: resData.nonceStr,
							package: resData.package,
							signType: 'MD5',
							paySign: resData.paySign,
							success (res) {
								console.log('线上支付成功----', )
								that.updateUserdata()
							},
							fail (res) {
								console.log('线上支付错误----', )
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 更新用户资料
			updateUserdata(){
				uni.$u.http.post('/api/update_userdata/' + this.userId + '?from=miniprogram', {
					first_name: this.userInfo.first_name
				}).then(res => {
					console.log('更新用户资料----', res.data)
					uni.setStorageSync("userInfo", JSON.stringify(res.data.data));
					//uni.setStorageSync("token", resa.data.data.token);
					//uni.setStorageSync("isLogin", true);
					//uni.setStorageSync("userId", resa.data.data.user_id);
					this.userInfo = res.data.data
					// uni.reLaunch({
					// 	url: "/myPages/create/create"
					// })
				}).catch(err => {
					console.log(err)
				})
			},
			//系统配置接口
			getVipSettings() {
				uni.$u.http.get('/api/vip_settings?from=miniprogram').then(res => {
					console.log('系统配置接口----', res.data.data)
					this.settingData = res.data.data
					//this.vipInfo = res.data.data.vip_info
					for (let i in this.settingData.vip_info) {
						this.vipInfo.push(this.settingData.vip_info[i])
					}
					console.log('系统配置接口----', this.vipInfo)
					this.vipPrice = this.vipInfo[0].total_price_of_checking_out
				}).catch(err => {
					console.log(err)
				})
			},
			clickVipPrice(index) {
				this.priceIndex = index
				this.vipPrice = this.vipInfo[this.priceIndex].total_price_of_checking_out
			},
			changeCheckbox(e) {
				console.log('e----', e.detail.value.length)
				this.agreeChecked = e.detail.value.length
			},
			openPromise() {
				// console.log('open');
			},
			closePromise() {
				this.showPromise = false
				// console.log('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.promise{
		width: 560rpx;
		box-sizing: border-box;
		padding:0 30rpx 35rpx;
		.btn{
			height: 70rpx;
			border-radius: 35rpx;
			background: #F9BE01;
			line-height: 70rpx;
			text-align: center;
			color: #3D3D3D;
			font-size: 26rpx;
			font-weight: 600;
			margin-top: 25rpx;
		}
		.title{
			text-align: center;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			color: #FFFFFF;
			padding:25rpx 0 25rpx;
		}
		.text{
			font-size: 20rpx;
			font-weight: normal;
			line-height: 32rpx;
			color: #FFFFFF;
			text-align: justify;
		}
	}
	.vip_desc {
		padding: 40rpx 40rpx 0;

		.ph {
			width: 100%;
		}
	}

	.sale {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #222;
		padding: 40rpx 40rpx 30rpx;

		.name {
			font-size: 22rpx;
			color: #7F7F83;
			line-height: 30rpx;
		}

		.mai {
			display: flex;
			align-items: center;
			font-size: 22rpx;
			color: #7F7F83;
			line-height: 22rpx;
		}
	}

	.vip_price {
		padding: 0 40rpx;
		display: flex;
		align-items: stretch;
		justify-content: space-between;

		.item {
			width: 210rpx;
			height: 280rpx;
			border-radius: 15rpx;
			background: #1F1F1F;
			box-sizing: border-box;
			border: 2rpx solid #1F1F1F;

			.ph {
				display: block;
				width: 100%;
			}

			// padding:30rpx;
			// display: flex;
			// align-items: flex-start;
			// justify-content: space-between;
			// flex-direction: column;
			&.hover {
				border: 2rpx solid #fff;
			}

			// .name{
			// 	font-size: 32rpx;
			// 	font-weight: normal;
			// 	line-height: 48rpx;
			// 	color: #FFFFFF;
			// }
			// .time{
			// 	font-size: 22rpx;
			// 	line-height: 24rpx;
			// 	color: #7F7F83;
			// 	margin-top: 10rpx;
			// }
			// .money{
			// 	font-size: 56rpx;
			// 	line-height: 60rpx;
			// 	font-weight: bold;
			// 	color: #FFFFFF;
			// 	margin-top: auto;
			// 	text{
			// 		font-size: 24rpx;
			// 	}
			// }
			// .del_money{
			// 	font-size: 20rpx;
			// 	line-height: 30rpx;
			// 	color: #7F7F83;
			// 	text-decoration: line-through;
			// }
		}
	}

	.page_bg {
		background: #000;
		min-height: 100vh;
	}

	.cvip_info {
		margin: 40rpx;
		height: 300rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #111;
		box-sizing: border-box;
		padding: 40rpx;

		.info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ph {
				flex-shrink: 0;
				width: 86rpx;
				height: 86rpx;
				border-radius: 50%;
				margin-right: 25rpx;
			}

			.item {
				width: 100%;

				.name {
					font-size: 26rpx;
					font-weight: 600;
					line-height: 40rpx;
					color: #000105;
					display: flex;
					align-items: center;

					.ico_v {
						display: block;
						width: 75rpx;
						flex-shrink: 0;
						margin-left: 20rpx;
					}
				}

				.time {
					font-size: 20rpx;
					font-weight: normal;
					line-height: 30rpx;
					color: rgba(0, 0, 0, 0.5);
					margin-top: 5rpx;
				}
			}

			.btn {
				flex-shrink: 0;
				width: 140rpx;
				height: 54rpx;
				line-height: 54rpx;
				border-radius: 15rpx;
				background: rgba(26, 29, 34, 0.3);
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 0.4);
				text-align: center;

				&.hover {
					color: #fff;
					background: #1A1D22;
				}
			}
		}

		.nav {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 56rpx;

			.item {
				margin-right: 80rpx;
			}

			.num {
				font-size: 30rpx;
				font-weight: bold;
				line-height: 46rpx;
				color: #25242E;
			}

			.name {
				font-size: 22rpx;
				font-weight: normal;
				line-height: 30rpx;
				color: rgba(0, 0, 0, 0.5);
			}
		}
	}

	.footer_none {
		width: 100%;
		height: 200rpx;
	}

	.footer_yellow_btn {
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		z-index: 99;
		padding: 30rpx 46rpx 60rpx;
		background: #000;

		.btn {
			height: 76rpx;
			border-radius: 35rpx;
			background: #F9BE01;
			line-height: 76rpx;
			text-align: center;
			font-size: 30rpx;
			color: #292D32;
			font-weight: 600;
		}

		.agree {
			margin-top: 10rpx;
			font-size: 24rpx;
			line-height: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			label {
				display: flex;
				align-items: center;
			}

			.yellow {
				color: rgba(255, 164, 46, 1);
			}
		}
	}
</style>